<template>
  <view :class="theme">
    <view class="m-30 br-20 oh fs-28">
      <view class="fd-row ai-center bg-2 height-120 pl-30 pr-30">
        <text class="width-120">姓名</text>
        <input v-model="formData.name.value" class="f1 height-100percent fs-28 pl-30 pr-30" type="text" maxlength="24"
          placeholder="请输入真实姓名" placeholder-class="color-29">
      </view>
      <view class="mt-2 fd-row ai-center bg-2 height-120 pl-30 pr-30">
        <text class="width-120">身份证号</text>
        <input v-model="formData.idNumber.value" class="f1 height-100percent fs-28 pl-30 pr-30" type="text" maxlength="18"
          placeholder="请输入身份证号" placeholder-class="color-29">
      </view>
      <view class="mt-2 fd-row ai-center bg-2 height-120 pl-30 pr-30">
        <text class="width-120">银行卡号</text>
        <input v-model="formData.bankNumber.value" class="f1 height-100percent pl-30 pr-30 fs-28" type="number"
          maxlength="20" placeholder-class="color-29" placeholder="请输入银行卡号">
      </view>
      <view class="mt-2 fd-row ai-center bg-2 height-120 pl-30 pr-30">
        <text class="width-120">手机号</text>
        <input v-model="formData.phoneNumber.value" class="f1 height-100percent pl-30 pr-30 fs-28" type="number"
          maxlength="11" placeholder-class="color-29" placeholder="请输入手机号">
      </view>
    </view>

    <button @click="submit" hover-class="tap-hover" style="margin: 120rpx 30rpx; line-height: 88rpx;"
      class="bg-6 br-10 color-2 text-center fs-36">
      确认
    </button>

    <u-popup v-model="showPopup.password" @input="changePopup($event, 'password')" mode="center" closeable
      :mask-close-able="false" close-icon-color="#333">
      <view class="bg-2 oh br-20" style="width: 90vw;">
        <view class="mt-30 ai-center">
          <text class="mt-16 mb-30 color-6 fs-32 fw-700">请输入支付密码</text>
          <u-message-input @change="inputPayPassword" @finish="bindCard" focus width="80" :maxlength="6" space="5"
            dot-fill />
        </view>
        <view @click="uniNavigator({ url: `/pages/client/main/setPayPassword` })" hover-class="tap-hover"
          class="mt-10 mb-30 p-20 as-center ml-12 color-5" style="text-decoration: underline;">
          忘记支付密码？
        </view>
      </view>
    </u-popup>
  </view>
</template>
  
<script lang="ts" setup>

import { useMapState } from "@/common/libs/store";
import { uniNavigator } from "@/common/libs/utils";
import { ref, reactive } from "vue";
const { theme } = useMapState(["theme"]);

const formData = reactive({
  name: {
    errorMessage: "请输入真实姓名",
    value: "",
    field: "id_name",
    rule: /^.+$/
  },
  idNumber: {
    value: "",
    errorMessage: "身份证号输入错误",
    field: "id_card",
    rule: /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/
  },
  bankNumber: {
    value: "",
    errorMessage: "请输入银行卡号",
    field: "card_no",
    rule: /^.+$/
  },
  phoneNumber: {
    value: "",
    errorMessage: "手机号码输入有误",
    field: "mobile",
    rule: /^1[0-9]{10}$/
  },
});

const changePopup = (e: boolean, popupKey: keyof typeof showPopup) => {
  showPopup[popupKey] = e;
}

const showPopup = reactive({
  password: false
});

const payPassword = ref("");
const inputPayPassword = (val: string) => {
  payPassword.value = val;
}
const bindCardParams: AnyObject = {};
const bindCard = () => {
  bindCardParams.pay_pass = payPassword.value;
  uni.showToast({ icon: "loading" });
  uni.request({
    url: "/bankBind",
    data: bindCardParams,
    success({ data }: any) {
      uni.hideToast();
      open(data.sign_url);
      uni.navigateBack();
    }
  });
  showPopup.password = false;
}
const submit = () => {
  const verification = (<Array<keyof typeof formData>>Object.keys(formData)).every(key => {
    const { value, field, errorMessage: title, rule } = formData[key] as any;

    if (title && !rule.test(String(value))) {
      uni.showToast({ title, icon: "none" });
      return false;
    }

    field && (bindCardParams[field] = value);
    return true;
  });
  if (!verification) return;
  showPopup.password = true;
}

</script>
  
<style lang="scss" scoped>
// scss
</style>